<template>
    <div class="articles">
        <banner></banner>
        <div class="site-content animate">
            <!-- 文章目录 -->
            <div id="article-menus">
                <menu-tree :menus="menus" child-label="child"></menu-tree>
            </div>
            <main class="site-main">
                <article class="hentry">
                    <!-- 文章头部 -->
                    <header class="entry-header">
                        <!-- 标题输出 -->
                        <h1 class="entry-title">
                            <span>{{ article.title }}</span>
                            <button @click="handleEdit" v-if="userInfo.permission === 0 || article.publisherId === userInfo.id">编辑</button>
                            <button @click="delConfirm = true" v-if="userInfo.permission === 0 || article.publisherId === userInfo.id">删除</button>
                        </h1>
                        <hr>
                        <div class="breadcrumbs">
                            <div class="publisher">发布者：{{ article.publisher }}</div>
                            <div id="crumbs">最后更新时间：{{ article.pubTime | parseTime }}</div>
                        </div>
                    </header>
                    <!-- 正文输出 -->
                    <div class="entry-content" v-highlight>
                        <div v-html="article.content"></div>
                    </div>
                    <!-- 文章底部 -->
                    <section-title>
                        <footer class="post-footer">
                            <!-- 阅读次数 -->
                            <div class="post-like">
                                <i class="iconfont iconeyes"></i>
                                <span class="count">{{ article.viewsCount }}</span>
                            </div>
                            <!-- <div class="donate" @click="showDonate = !showDonate">
                                <span>赏</span>
                                <ul class="donate_inner" :class="{ 'show': showDonate }">
                                    <li class="wedonate"><img src="@/assets/img/pay-wx.jpg">
                                        <p>微信</p>
                                    </li>
                                    <li class="alidonate"><img src="@/assets/img/pay-zfb.jpg">
                                        <p>支付宝</p>
                                    </li>
                                </ul>
                            </div> -->
                            <!-- 文章标签 -->
                            <div class="post-tags">
                                <i class="iconfont iconcategory"></i>
                                <router-link :to="'/category/' + article.category">{{ article.category }}</router-link>
                            </div>
                        </footer>
                    </section-title>

                    <!--声明-->
                    <!-- <div class="open-message">
                        <p>声明：YGodBlog博客|版权所有，违者必究|如未注明，均为原创|本网站采用<a
                                href="https://creativecommons.org/licenses/by-nc-sa/3.0/"
                                target="_blank">BY-NC-SA</a>协议进行授权</p>
                        <p>转载：转载请注明原文链接 - <a href="/">{{ article.title }}</a></p>
                    </div> -->
                    <!--评论-->
                    <div class="comments">
                        <div class="comment">
                            <h3>评论：</h3>
                            <comment-message-editor ref="editor" :inline="false" buttonText="发布"
                                @submit="submitComment"></comment-message-editor>
                        </div>
                        <comment v-for="item in comments" :key="item.id" :comment="item" @refresh="getComment">
                            <template v-if="item.reply">
                                <comment v-for="reply in item.reply" :key="reply.createTime" :comment="reply"></comment>
                            </template>
                        </comment>
                    </div>
                </article>
            </main>
        </div>
        <div class="mask" v-show="delConfirm" @click="handleCancleDel">
            <div class="mask-content">
                <span>主上，真的要删掉我吗!!</span>
                <div class="mask-btn">
                    <button @click="delConfirm = false">不删</button>
                    <button class="del" @click="handleDel">得删</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Banner from '@/components/banner'
import sectionTitle from '@/components/section-title'
import comment from '@/components/comment'
import menuTree from '@/components/menu-tree'
import { fetchArticle, fetchComment, fetchPostComment, fetchDeleteArticle } from '../api'

import commentMessageEditor from 'comment-message-editor'
import { mapState } from 'vuex'
export default {
    name: 'articles',
    data() {
        return {
            showDonate: false,
            comments: [],
            menus: [],
            article: {},
            delConfirm: false
        }
    },
    components: {
        Banner,
        sectionTitle,
        comment,
        menuTree,
        commentMessageEditor
    },
    computed: {
        ...mapState({
            userInfo: state => state.userInfo,
        }),
    },
    methods: {
        async getContent(id) {
            const res = await fetchArticle(id)
            this.article = res
        },
        getComment() {
            fetchComment(this.$route.params.id).then(res => {
                if (res.length === 0) {
                    return this.comments = []
                }
                this.comments = res.map(item => {
                    item.reply = JSON.parse(item.reply)
                    return item
                })

            }).catch(err => {
                console.log(err)
            })
        },
        fetchH(arr, left, right) {
            if (right) {
                return arr.filter(item => item.offsetTop > left && item.offsetTop < right)
            } else {
                return arr.filter(item => item.offsetTop > left)
            }
        },
        // 生成目录
        createMenus() {
            let arr = []
            for (let i = 6; i > 0; i--) {
                let temp = []
                let e = document.querySelector(".entry-content").querySelectorAll(`h${i}`)
                for (let j = 0; j < e.length; j++) {
                    let child = this.fetchH(arr, e[j].offsetTop, (j + 1 === e.length) ? undefined : e[j + 1].offsetTop)
                    temp.push({
                        h: i,
                        title: e[j].innerText,
                        id: e[j].childNodes[0].id,
                        offsetTop: e[j].offsetTop,
                        child
                    })
                }
                if (temp.length) {
                    arr = temp
                }
            }
            this.menus = arr
        },
        submitComment(value) {  // 发布评论
            if (!this.userInfo.id) return this.$message.error('请先登录')
            if (this.userInfo.permission === 3) return this.$message.error('小子，你已被拉黑，放弃挣扎吧')
            let data = {
                article_id: this.$route.params.id,
                content: value,
                fromUserId: this.userInfo.id,
                fromUserName: this.userInfo.username,
                fromUserAvatar: this.userInfo.avatar,
                createTime: new Date().getTime()
            }


            fetchPostComment(data).then(res => {
                this.$refs.editor.$children[0].$el.children[0].children[0].innerText = ''
                this.getComment()
            })
        },
        handleEdit() {
            this.$router.push({
                path: '/write',
                query: {
                    id: this.$route.params.id
                }
            })
        },
        handleCancleDel(e) {
            if (e.target.className === 'mask') {
                this.delConfirm = false
            };
        },
        handleDel() {
            fetchDeleteArticle(this.$route.params.id).then(res => {
                    this.$message.success('删除成功')
                    this.$router.push('/')
            })
        }
    },
    mounted() {
        setTimeout(() => {
            this.createMenus()
        }, 200)
        this.$refs.editor.$children[0].$el.children[0].children[0].attributes[2].value = '请输入评论'
    },
    created() {
        this.getComment()
        this.getContent(this.$route.params.id)
    }
}
</script>

<style scoped lang="less">
.site-content {
    position: relative;

    .site-main {
        padding: 80px 0 0 0;
    }
}

#article-menus {
    position: sticky;
    top: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
    border-radius: 3px;
    padding: 15px;
    width: 300px;
    transform: translateX(-120%) translateY(150px);
    font-size: 14px;
}

article.hentry {
    .entry-header {
        .entry-title {
            display: flex;
            font-size: 23px;
            font-weight: 600;
            color: #737373;
            margin: 0.67em 0;

            &:before {
                content: "#";
                margin-right: 6px;
                color: #d82e16;
                font-size: 20px;
                font-weight: 600;
            }

            span {
                flex: 1;
            }

            button {
                color: #737373;
                font-size: 12px;
                padding: 4px;
                margin-right: 5px;
                border: 1px solid #1a1717;
                border-radius: 5px;

                &:hover {
                    box-shadow: 0 0 5px #737373;
                }
            }
        }

        hr {
            height: 1px;
            border: 0;
            background: #EFEFEF;
            margin: 15px 0;
        }

        .breadcrumbs {
            font-size: 14px;
            color: #D2D2D2;
            text-decoration: none;
            margin-bottom: 30px;
            display: flex;
            justify-content: space-between;
            .publisher{
                color: #737373;
            }
        }
    }

    .comment {
        margin-top: 20px;

        h3 {
            font-weight: 600;
            font-size: 20px;
            height: 30px;
        }
    }

    footer.post-footer {
        width: 100%;
        padding: 20px 10px;
        margin-top: 30px;
        height: 65px;
        position: relative;

        i {
            font-size: 18px;
            margin-right: 5px;
        }

        .post-like {
            float: right;
            margin: 7px 0 0 20px;
        }

        .post-share {
            float: right;
            list-style: none;
            margin-right: 20px;
        }

        .donate {
            float: left;
            line-height: 36px;
            border-radius: 100%;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border: 1px solid #2B2B2B;

            &:hover {
                border: 1px solid goldenrod;

                span {
                    color: goldenrod;
                }
            }

            span {
                color: #2B2B2B;
                padding: 10px;
                position: relative;
                cursor: pointer;
            }

            .donate_inner {
                display: none;
                margin: 0;
                list-style: none;
                position: absolute;
                left: 80px;
                top: -40px;
                background: #FFF;
                padding: 10px;
                border: 1px solid #ddd;
                box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
                border-radius: 3px;

                &.show {
                    display: block;
                }

                li {
                    float: left;
                }

                img {
                    width: 100px;
                }

                p {
                    text-align: center;
                    font-size: 15px;
                    color: #D2D2D2;
                    line-height: 1rem;
                }
            }

            .donate_inner:after,
            .donate_inner:before {
                content: "";
                position: absolute;
                left: 0;
                bottom: 45%;
                margin-left: -8px;
                border-top: 8px solid transparent;
                border-bottom: 8px solid transparent;
                border-right: 8px solid #fff;
            }

            .donate_inner:before {
                left: -1px;
                border-right: 8px solid #ddd;
            }

        }

        .post-tags {
            margin: 7px 0 0 0;
            float: left;

            a:hover {
                color: #ff6d6d;
            }
        }
    }

    .open-message {
        margin: 50px 0;
        position: relative;
        background: #2B2B2B;
        padding: 10px 30px;
        border-radius: 3px;
        font-size: 14px;
        color: #fff;

        &:after {
            content: "";
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid #2B2B2B;
            position: absolute;
            top: -8px;
            left: 48%;
        }

        p {
            margin: 10px 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        a {
            color: #A0DAD0;
            padding: 0 5px;
        }
    }
}

/deep/ code {
    /*元素内的空白保留，并允许换行*/
    white-space: pre-line !important;
    /*是否允许在单词内断句*/
    word-wrap: break-word !important;
    /*强调怎么样断句*/
    word-break: break-all !important;
}

/deep/ .emoji-wrapper {
    display: none;
}

.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;

    .mask-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 300px;
        height: 200px;
        background: #fff;
        border-radius: 10px;
        padding: 20px;

        span{
            display: block;
            text-align: center;
            margin-top: 20px;
        }

        .mask-btn {
            display: block;
            text-align: center;
            margin-top: 60px;
            
            button {
                padding: 5px 20px;
                border: 1px solid #1a1717;
                border-radius: 5px;
                color: #1a1717;
                margin: 0 10px;

            }

            .del{
                background-color: #ecb9b9;
            }

            button:hover {
                box-shadow: 0 0 5px #1a1717;
            }

            .del:hover {
                box-shadow: 0 0 5px #ee0505;
            }
        }
        
    }
}

@media (max-width: 1490px) {
    #article-menus {
        display: none;
    }
}

@media (max-width: 800px) {
    #article-menus {
        display: none;
    }
}
</style>